<template>
  <div class="main">
    <div class="title">
      <div>读者管理</div>
    </div>
    <div class="search-bar">
      <div class="label-input">
        <span>搜索内容：</span>
        <el-input v-model="query.queryName" style="width: 200px" />
      </div>
      <el-button class="search-btn" @click="getTabelData">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>
    <div class="cut-line"></div>
    <el-table
      :data="tabelData"
      height="400"
      style="width: 100%"
      border
      v-loading="loading"
      :header-cell-style="headerStyle"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" align="center" label="#" width="50" />
      <el-table-column prop="id" align="center" label="ID号" width="200" />
      <el-table-column prop="cardId" align="center" label="卡号" width="200" />
      <el-table-column
        prop="name"
        align="center"
        label="读者姓名"
        width="200"
      />
      <el-table-column prop="isDeleted" align="center" label="状态" width="100">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template v-slot="scope">
          <div class="table-buts">
            <el-button
              style="background-color: #3d839c; color: #fff"
              @click="getPersonBorrow(scope.row.id)"
              >查看当前借阅图书</el-button
            >
            <el-button type="primary" @click="getPersonBorrowLog(scope.row.id)"
              >查看借阅日志</el-button
            >
            <el-button
              type="danger"
              v-if="scope.row.isDeleted == '正常'"
              @click="endReader(scope.row.id)"
              >锁定</el-button
            >
            <el-button type="success" v-else @click="startReader(scope.row.id)"
              >启用</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="tabelDataTotal"
        :page-size="query.pageSize"
        :current-page="query.pageNum"
        @update:current-page="currentPageChange"
      />
    </div>
    <!-- 查看当前借阅图书 -->
    <el-dialog v-model="dialogBorrowTableVisible" :title="title" width="1050">
      <div class="dialog-win">
        <el-table
          :data="borrowList"
          height="400"
          style="width: 100%"
          border
          :header-cell-style="headerStyle"
        >
          <el-table-column type="index" align="center" label="#" width="50" />
          <el-table-column
            prop="bookName"
            align="center"
            label="图书名称"
            width="200"
          />
          <el-table-column
            prop="startTime"
            align="center"
            label="借阅时间"
            width="180"
          />
          <el-table-column
            prop="dueTime"
            align="center"
            label="到期时间"
            width="180"
          />
          <el-table-column
            prop="renewDay"
            align="center"
            label="续借天数"
            width="100"
          />
          <el-table-column
            prop="renewTime"
            align="center"
            label="续借到期时间"
            width="180"
          />
          <el-table-column prop="status" align="center" label="状态" />
        </el-table>
      </div>
    </el-dialog>
    <!-- 查看借阅日志 -->
    <el-dialog v-model="dialogBorrowLogTableVisible" :title="title" width="600">
      <div class="dialog-win">
        <el-table
          :data="borrowLogList"
          height="400"
          style="width: 100%"
          border
          :header-cell-style="headerStyle"
        >
          <el-table-column type="index" align="center" label="#" width="50" />
          <el-table-column
            prop="bookName"
            align="center"
            label="图书名称"
            width="200"
          />
          <el-table-column
            prop="type"
            align="center"
            label="状态"
            width="100"
          />
          <el-table-column prop="operateTime" align="center" label="记录时间" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import message from "@/util/alert.js";
import { ref, reactive, onMounted } from "vue";
import {
  getPersonListApi,
  getPersonBorrowApi,
  getPersonBorrowLogApi,
  startPersonApi,
  endPersonApi,
} from "@/api/readerApi.js";
// 查询参数
const query = reactive({
  queryName: "",
  pageNum: 1,
  pageSize: 10,
});
const tabelDataTotal = ref(0);
const loading = ref(false);
const tabelData = ref([]);
// 表格头部样式
const headerStyle = () => {
  return {
    backgroundColor: "#a0cfff",
    color: "#000000",
    padding: "8px 0px",
  };
};
// 表格行内样式
const tableRowClassName = ({ row }) => {
  if (row.isDeleted != "正常") {
    return "danger-row";
  }
  return "";
};
// 当前页改变
const currentPageChange = (num) => {
  query.pageNum = num;
  getTabelData();
};

// 获取柜子列表
const getTabelData = async () => {
  loading.value = true;
  let res = await getPersonListApi(query);
  tabelDataTotal.value = res.data.total;
  tabelData.value = res.data.rows;
  loading.value = false;
};

// 启用
const startReader = (id) => {
  message.confirm({
    title: "提示",
    msg: `是否启用该读者`,
    ok: async () => {
      await startPersonApi(id);
      message.success(`启用成功`);
      getTabelData();
    },
  });
};
// 停用
const endReader = (id) => {
  message.confirm({
    title: "提示",
    msg: `是否锁定该读者`,
    ok: async () => {
      await endPersonApi(id);
      message.success(`停用成功`);
      getTabelData();
    },
  });
};
// 重置
const reset = () => {
  Object.assign(query, {
    queryName: "",
    pageNum: 1,
    pageSize: 10,
  });
  getTabelData();
};
// 弹窗
const borrowList = ref({});
const borrowLogList = ref({});
const dialogBorrowTableVisible = ref(false);
const dialogBorrowLogTableVisible = ref(false);
const title = ref("");
// 查看当前借阅情况
const getPersonBorrow = async (id) => {
  let res = await getPersonBorrowApi(id);
  borrowList.value = res.data;
  dialogBorrowTableVisible.value = true;
  title.value = "当前借阅记录";
};
// 查看借阅日志
const getPersonBorrowLog = async (id) => {
  let res = await getPersonBorrowLogApi(id);
  borrowLogList.value = res.data;
  dialogBorrowLogTableVisible.value = true;
  title.value = "借阅日志";
};
onMounted(async () => {
  getTabelData();
});
</script>
      <style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  padding: 10px 20px;
  .title {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
  }
}
.search-bar {
  margin-top: 20px;
  display: flex;
  align-items: center;
  height: 30px;
  .search-btn {
    background-color: #79bbff;
    color: #ffffff;
  }
  .el-button {
    height: 28px;
  }
}
.label-input {
  display: flex;
  color: #aaaaaa;
  height: 30px;
  align-items: center;
  margin-right: 20px;
  font-weight: 550;
  .el-input {
    border: none;
    height: 30px;
  }
}
.cut-line {
  margin-top: 30px;
  height: 1px;
  background-color: #cdd0d6;
}

.pagination {
  display: flex;
  justify-content: center;

  .el-pagination {
    margin: auto 0;
    margin-top: 10px;
  }
}
:deep(.el-table) {
  margin-top: 20px;
  .el-table__cell {
    padding: 4px;
  }
  .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>